<template>
    <div>
        <div class="metser" v-show="type" @click="TaskClick">
            <div class="meste-name" @click="Task">
                <ul>
                    <li class="upconte van-hairline--bottom">头像上传</li>
                    <li id="Digital-photographS" class="van-hairline--bottom">拍照</li>
                    <li id="Digital-GalleryS" class="van-hairline--bottom">相册</li>
                    <li>取消</li>
                </ul>
            </div>
        </div>
        <div :style="{padding:'10px'}">
            <van-nav-bar
                    :fixed="fixed"
                    title="个人资料"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            />
            <div class="userinfo">
                <div class="Head-portrait van-cell van-field" @click="photo">
                    <div class="van-cell__title">
                    <span :style="{
                fontSize:'14px',
                color:'#333'
                }">头像</span>
                    </div>
                    <img src="../../static/headicon.png" class="Head-portrait-img" v-if="avatar==''"/>
                    <img :src="'http://api.yyw66.cn/upload/'+avatar" class="Head-portrait-img" v-if="avatar!=''"/>
                </div>
                <van-cell-group>
                    <van-field label="昵称" v-model="username" placeholder="请输入昵称"/>
                    <van-field
                            :value="usermobile"
                            label="手机号"
                            disabled
                    />
                    <van-cell title="性别" class="van-field">
                        <van-radio-group v-model="radio" class="radio-list">
                            <van-radio name="1" class="radio-value">男</van-radio>
                            <van-radio name="2" class="radio-value">女</van-radio>
                            <van-radio name="0" class="radio-value">保密</van-radio>
                        </van-radio-group>
                    </van-cell>
                </van-cell-group>

            </div>
            <van-button size="large" style="margin-top: 20px" @click="Postuser">确定</van-button>
        </div>
    </div>
</template>

<script>
    import {UserInfo, PostUserInfo} from "../api/data";
    import {getBase64Image} from '../utils/phto.js'
    import {Uploader, Toast} from 'vant';
    import Vue from 'vue'

    Vue.use(Uploader, Toast);
    export default {
        data() {
            return {
                fixed: true,
                type: false,
                usermobile: '',
                radio: '0',
                username: '',
                avatar: ''
            }
        },
        methods: {
            Postuser: function () {
                PostUserInfo(this.username, this.avatar, this.radio).then(res => {
                    if (res.data.code == 1) {
                        Toast('修改成功！')
                    } else {
                        Toast('修改失败！')
                    }
                })
            },
            photo: function () {
                this.type = true;
            },
            Task: function () {
                this.type = true;
            },
            TaskClick: function (last) {
                this.type = false;
            },
            onClickLeft() {
                this.$router.back()
            }
        },
        mounted() {
            var _that                 = this;
            //相册
            var DigitalGallery        = document.getElementById('Digital-GalleryS');
            //拍照
            var Digitalphotograph     = document.getElementById('Digital-photographS');
            Digitalphotograph.onclick = function () {
                //拍照的函
                appendByCamera()
            }
            DigitalGallery.onclick    = function () {
                //调取本地相册
                appendByGallery()

            };
            //拍照上传进行调用
            // personalbar.personalbar()
            function appendByCamera() {
                //调取本地相机进行拍摄
                plus.camera.getCamera().captureImage(function (e) {
                    //拍完照的代码放到自己本地相册里
                    plus.io.resolveLocalFileSystemURL(e, function (entry) {
                        //曾到本地相册里
                        var path = entry.toLocalURL();

                        localStorage.setItem('avatar_path', path);

                        _that.$router.push({
                            path: `/crop`
                        })

                    });
                });
                //进行拍摄
                plus.nativeUI.closeWaiting();
            }

            function appendByGallery() {
                //调取本地相册上传
                plus.gallery.pick(function (path) {

                    localStorage.setItem('avatar_path', path);
                    _that.$router.push({
                        path: `/crop`
                    })
                });
            }


            function uploadAvatar(path) {

                var img    = new Image();
                img.src    = path;        // 传过来的图片路径在这里用。
                img.onload = function () {
                    var that = this;
                    //生成比例
                    var w    = that.width,
                        h    = that.height;

                    plus.zip.compressImage({
                        src: path,
                        dst: '_documents/c.jpg',
                        overwrite: true,		// 旋转90度
                        width: 120,
                        height: 120,
                        format: 'jpg',
                        clip: {
                            top: '25%',
                            left: '0px',
                            width: '100%',
                            height: h + 'px'
                        }
                    }, function (e) {
                        var task = plus.uploader.createUpload("http://api.yyw66.cn/api/user/upload/one",
                            {method: "POST"},
                            function (t, status) {
                                //alert(t);
                                // alert(status);
                                // 上传完成
                                if (status == 200) {
                                    //alert("Upload success: " + JSON.stringify(t));
                                    //alert(t.responseText)
                                    let data     = JSON.parse(t.responseText)
                                    ///alert(data.data.url)//上传成功，后台返回的图片地址
                                    _that.avatar = data.data.url
                                    //alert(this.avatar)
                                    PostUserInfo(this.username, data.data.url, this.radio).then(res => {
                                        console.log(res.data)
                                        if (res.data.code == 1) {
                                            Toast('修改成功！')
                                        }
                                    })
                                } else {
                                    //alert("Upload failed: " + status);
                                }
                            }
                        );
                        task.addFile(e.target, {key: "file"});
                        task.setRequestHeader('XX-Device-Type', 'web');
                        task.setRequestHeader('XX-Api-Version', '1.1.0');
                        task.setRequestHeader('XX-Token', localStorage.getItem('token'));
                        task.start();
                    }, function () {

                    });


                }


            }

        },
        created() {
            UserInfo().then(res => {
                console.log(res.data.data)
                this.usermobile = res.data.data.mobile
                this.username   = res.data.data.user_nickname
                this.avatar     = res.data.data.avatar
                this.radio      = JSON.stringify(res.data.data.sex)
            })
        }
    }
</script>

<style scoped>
    .radio-value {
        display: inline-block;
        vertical-align: top;
    }

    .radio-list {
        width: 100%;
        text-align: left;
    }

    .Head-portrait-img {
        height: 40px;
        width: 40px;
        border-radius: 30px;
        float: right;
        margin: -8px;
    }

    .userinfo {
        margin-top: 46px;
    }

    .Head-portrait {
        width: 100%;
    }

    /* 头像的css */
    .metser {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #333333b0;
        z-index: 99999999999999 !important;
    }

    .meste-name {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        background: white;
    }

    .meste-name ul li {
        text-align: center;
        height: 50px;
        line-height: 50px;
    }

    .meste-name ul .upconte {
        color: red;
        font-size: 18px;
    }

</style>